<template>
	<view class="washPro">
		<view class="nav">
			<view class="nav-header">
				<!-- 搜索栏 -->
				<view class="nav-header-mt">
					<uni-easyinput @change placeholderStyle="border-radius: 15px;" radius="95" suffixIcon="search"
						v-model="value" placeholder="请输入要搜索的内容" @iconClick="iconClick" />
				</view>
				<!-- 历史记录 -->
				<view class="nav-header-content">
					<view class="uni-test-1">历史记录:</view>
					<view class="uni-test-2" v-for="index in 9" :key="index">
						<view @click="aaa">
							坤坤洗脚店</view>
					</view>
				</view>
			</view>
			<view class="tab-blank"></view>
		</view>
		<!-- 搜索视图 -->
		<view class="content-box">
			<!-- 使用 v-for 循环生成八个 show 视图 -->
			<view class="show" v-for="index in 8" :key="index">
				<view @click="navigateToBuyWash">
					<view class="show-nav">
						<view class="show-nav-h1">爱坤洗脚房</view>
						<view class="show-nav-text">556m</view>
					</view>
					<view class="show-comments">
						<uni-rate class="show-comments-xx" size="12" :readonly="true" :value="storeScore" />
						<view class="show-comments-stor">{{storeScore}}分</view>
						<view class="show-comments-text"> 销量：</view>
						<view class="show-comments-text">556</view>
					</view>
					<view class="show-img">
						<image src="/static/washProImg/ide.png"></image>
						<view class="show-img-text-container">
							<view class="show-img-text">营业时间：周一至周五</view>
							<view class="show-img-text">早上8:00-晚上22:00</view>
							<view class="show-img-text">上阳区人民路与解放路交叉口</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeScore: 4, // 店铺评分
			}
		},
		methods: {
			search() {
				// 搜索功能的实现
			},
			navigateToBuyWash() {
				uni.navigateTo({
					url: '/pages/washPro/buyWash/buyWash'
				});
			}
		}
	}
</script>

<style>
	.washPro {
		height: auto;
		/* 整体高度自适应 */
		/* margin: 0 10px; */
	}

	.nav-header-mt {
		width: 94%;
		margin: 0 auto;

	}

	.nav-header {
		width: 100%;
		height: 100px;
		/* 导航栏高度 */
		/* margin: 0 10px; */
		background-color: #1E90FF;
		/* 导航栏背景色 */
		position: fixed;
		/* 固定定位 */
		top: 1;
		left: 0;
		right: 0;
		z-index: 1000;
		/* 层级 */
	}

	.tab-blank {
		width: 100%;
		height: 130px;
		/* 空白区域高度 */
		position: fixed;
		top: 100;
		/* 距离顶部的距离 */
		right: 0;
		background-color: #1E90FF;
		/* 空白区域背景色 */
		z-index: 1;
		/* 层级 */
	}

	.nav-header-content {
		margin: 8px 11px 0;
		display: flex;
		/* 使用弹性盒子布局 */
		align-items: center;
		/* 垂直居中 */
		flex-wrap: wrap;
		/* 允许换行 */
	}

	.uni-test-1 {
		margin-left: 6px;
		font-size: 13px;
		/* 历史记录字体大小 */
		margin-right: 3px;
		/* 右边距3px */
	}

	.uni-test-2 {
		padding-left: 5px;
		/* 历史记录回显的左边距 */
		font-size: 11px;
		/* 历史记录字体大小 */
	}

	.content-box {
		display: flex;
		/* 弹性盒子布局 */
		flex-direction: column;
		/* 垂直排列 */
		justify-content: flex-start;
		/* 从顶部开始排列 */
		margin: 0 22px 0 10px;
		/* 外边距 */
	}

	.show {
		width: 95%;
		/* 显示区域宽度 */
		background-color: #fff;
		/* 背景颜色 */
		margin: 10px auto;
		/* 上下外边距，水平居中 */
		z-index: 2;
		/* 层级 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		border-radius: 10px;
		/* 圆角效果 */
		padding: 15px;
		/* 内边距 */
	}

	.show:nth-child(1) {
		margin-top: 100px;
		/* 向下移动20px */
	}

	.show-nav {
		display: flex;
		/* 弹性盒子布局 */
		justify-content: space-between;
		/* 两端对齐 */
		align-items: center;
		/* 垂直居中 */

	}

	.show-nav-h1 {
		font-size: 18px;
		/* 店名字体大小 */
		font-weight: 900;
		/* 字体加粗 */
	}

	.show-nav-text {
		color: #1E90FF;
		/* 距离字体颜色 */
		font-size: 10px;
		/* 字体大小 */
		font-weight: 900;
		/* 字体加粗 */
	}

	.show-comments {
		display: flex;
		/* 弹性盒子布局 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 1px;
		/* 上边距 */
		font-size: 10px;
		/* 字体大小 */
	}

	.show-comments-xx {
		margin-right: 4px;
		/* 星星右边距 */
	}

	.show-comments-stor {
		margin-right: 18px;
		/* 评分右边距 */
	}

	.show-img {
		display: flex;
		/* 弹性盒子布局 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 5px;
		/* 上边距 */
	}

	.show-img>image {
		width: 110px;
		/* 图片宽度 */
		height: 70px;
		/* 图片高度 */
		border-radius: 10px;
		/* 圆角 */
	}

	.show-img-text-container {
		display: flex;
		/* 弹性盒子布局 */
		flex-direction: column;
		/* 垂直排列 */
	}

	.show-img-text {
		font-size: 11px;
		/* 文本字体大小 */
		margin: 0 0 1px 8px;
		/* 上下2px边距 */
		color: #666;
		/* 文本颜色 */
	}
</style>